<template>
  <div>
    <!-- 图片上传组件 -->
    <ik-image-upload
      class="avatar-uploader"
      name="img"
      @success="handleUploadSuccess"
    />
    <!-- 富文本编辑器 -->
    <quill-editor
      ref="myQuillEditor"
      v-model="content"
      class="editor"
      :options="editorOption"
      @blur="onEditorBlur"
      @focus="onEditorFocus"
      @change="onEditorChange"
    />
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"
import "quill/dist/quill.core.css"
import "quill/dist/quill.snow.css"

export default {
  components: {
    quillEditor
  },
  // eslint-disable-next-line vue/require-prop-types
  props: ["value"],
  data() {
    return {
      content: "", // 编辑器内容
      editorOption: { // 编辑器配置
        theme: "snow",
        placeholder: "您想说点什么？",
        modules: {
          toolbar: {
            container: [
              // 工具栏按钮配置
              // 加粗、斜体、下划线、删除线
              ["bold", "italic", "underline", "strike"],
              // 引用、代码块
              ["blockquote", "code-block"],
              // 1、2级标题
              [{ header: 1 }, { header: 2 }],
              // 有序、无序列表
              [{ list: "ordered" }, { list: "bullet" }],
              // 上标/下标
              [{ script: "sub" }, { script: "super" }],
              // 缩进
              [{ indent: "-1" }, { indent: "+1" }],
              // 字体大小
              [{ size: ["small", false, "large", "huge"] }],
              // 1-6级标题
              [{ header: [1, 2, 3, 4, 5, 6, false] }],
              // 字体颜色、背景颜色
              [{ color: [] }, { background: [] }],
              // 字体种类
              [{ font: [] }],
              // 对齐方式
              [{ align: [] }],
              // 清除格式
              ["clean"],
              // 链接、图片、视频
              ["link", "image", "video"]
            ],
            handlers: {
              // 图片按钮处理函数
              image: function(value) {
                if (value) {
                  // 触发图片上传组件的文件选择
                  document.querySelector(".avatar-uploader input").click()
                } else {
                  // 移除选中的图片格式
                  this.quill.format("image", false)
                }
              }
            }
          }
        }
      }
    }
  },
  watch: {
    content(val) {
      this.$emit("input", val)
    },
    value(val) {
      this.content = val
    }
  },
  mounted() {
    this.content = this.value
  },
  methods: {
    /**
     * 图片上传成功处理函数
     * @param imageUrl
     */
    handleUploadSuccess(imageUrl) {
      const quill = this.$refs.myQuillEditor.quill
      const length = quill.getSelection().index
      quill.insertEmbed(length, "image", imageUrl)
      quill.setSelection(length + 1)
    },
    // 编辑器失去焦点事件处理函数
    onEditorBlur() {
    },
    // 编辑器获得焦点事件处理函数
    onEditorFocus() {
    },
    // 编辑器内容改变事件处理函数
    onEditorChange() {
      this.$emit("input", this.content)
    }
  }
}
</script>

<style lang="scss">
.editor {
}

.ql-snow {
  .ql-tooltip[data-mode=link]::before {
    content: "请输入链接地址:";
  }

  .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0;
    content: '保存';
    padding-right: 0;
  }

  .ql-tooltip[data-mode=video]::before {
    content: "请输入视频地址:";
  }

  .ql-picker {
    &.ql-size {
      .ql-picker-label::before,
      .ql-picker-item::before {
        content: '14px';
      }

      .ql-picker-label[data-value=small]::before,
      .ql-picker-item[data-value=small]::before {
        content: '10px';
      }

      .ql-picker-label[data-value=large]::before,
      .ql-picker-item[data-value=large]::before {
        content: '18px';
      }

      .ql-picker-label[data-value=huge]::before,
      .ql-picker-item[data-value=huge]::before {
        content: '32px';
      }
    }

    &.ql-header {
      .ql-picker-label::before,
      .ql-picker-item::before {
        content: '文本';
      }

      .ql-picker-label[data-value="1"]::before,
      .ql-picker-item[data-value="1"]::before {
        content: '标题1';
      }

      .ql-picker-label[data-value="2"]::before,
      .ql-picker-item[data-value="2"]::before {
        content: '标题2';
      }

      .ql-picker-label[data-value="3"]::before,
      .ql-picker-item[data-value="3"]::before {
        content: '标题3';
      }

      .ql-picker-label[data-value="4"]::before,
      .ql-picker-item[data-value="4"]::before {
        content: '标题4';
      }

      .ql-picker-label[data-value="5"]::before,
      .ql-picker-item[data-value="5"]::before {
        content: '标题5';
      }

      .ql-picker-label[data-value="6"]::before,
      .ql-picker-item[data-value="6"]::before {
        content: '标题6';
      }
    }

    &.ql-font {
      .ql-picker-label::before,
      .ql-picker-item::before {
        content: '标准字体';
      }

      .ql-picker-label[data-value=serif]::before,
      .ql-picker-item[data-value=serif]::before {
        content: '衬线字体';
      }

      .ql-picker-label[data-value=monospace]::before,
      .ql-picker-item[data-value=monospace]::before {
        content: '等宽字体';
      }
    }
  }
}

.avatar-uploader {
  height: 0;
}

.ql-container {
  min-height: 30vh;
}
</style>
